<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				margin: 0;
				padding-top: 50px;
			}

			#container {
				width: 1200px;
				height: 440px;
				margin: auto;

			}

			#logo {
				background-color: #cad1db;
				height: 100px;
				width: 1200px;
			}

			#logo img {
				margin: 23px 0px 0px 150px;

			}

			#main {
				background: url(./images-5/bp.jpg) no-repeat;
				height: 100%;
				opacity: 0.9;
			}

			#main-bj {
				background-color: #e5e7ea;
				width: 310px;
				height: 330px;
				opacity: 0.8;
				float: right;
				margin: 50px 100px 0px 0px;
				padding: 20px 30px 0px 30px;

			}

			#main-top {
				display: flex;
				justify-content: space-around;
			}

			#main-top div {
				font-family: "microsoft yahei";
				margin-bottom: 12px;
				width: 155px;
				height: 20px;
				text-align: center;
				line-height: 20px;
				border-bottom: 3px #B9B9B9 solid;
				padding-bottom: 10px;
			}

			#main-top div:hover {
				border-bottom: 3px #3cb4cf solid;
				height: 17px;
			}

			.div-bor {
				position: relative;
			}

			.div-bor input {
				outline: none;
				margin-top: 7px;
				margin-bottom: 10px;
				border: 3px #797979 solid;
				border-radius: 3px;
				background-color: #e5e7ea;
			}

			.icour-user {
				position: absolute;
				left: 3px;
				top: 0.7em;
				background-image: url(images-5/bz.jpg);
				background-repeat: no-repeat;
				background-position: 0px 0px;
				width: 39px;
				height: 34px;
			}

			.icour-user2 {
				position: absolute;
				left: 3px;
				top: 4.4em;
				background-image: url(images-5/bm.jpg);
				background-repeat: no-repeat;
				background-position: 0px 0px;
				width: 39px;
				height: 35px;
			}

			.user {
				padding-left: 44px;
			}

			.setting {
				font-size: 13px;
			}

			.setting-right {
				float: right;
			}

			#deng a{
				font-family: "microsoft yahei";
				font-size: 18px;
				color: #FFFFFF;
				text-decoration: none;
				background-color: #3CB4CF;
				display: block;
				height: 50px;
				line-height: 50px;
				text-align: center;
				margin-top: 12px;
				padding-right: 15px;
				border-radius: 4px;
			}
			#deng a:hover{
				box-shadow:  0px 10px 9px #888888;
			}
			#main-zc{
				display: flex;
				justify-content: row;
				margin: 12px 0px 15px 0px;
				font-family: "microsoft yahei";
				font-size: 13px;
			}
			#main-zc a{
				text-decoration: none;
				color: #00dddd;
			}
			#main-bottom{
				border-top: 1px solid #B9B9B9;
				font-family: "microsoft yahei";
				float: left;
				height: 28px;
				padding-top: 8px;
				width: 100%;
			}
			#main-bottom p{
				margin: 8px 10px 0 0;
				line-height: 14px;
				font-size: 14px;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="logo"><img src="images-5/logo.png"></div>
			<div id="main">
				<div id="main-bj">
					<div id="main-top">
						<div>账号登录</div>
						<div>安全登录</div>
					</div>
					<div class="div-bor">
						<i class="icour-user"></i>
						<input type="text" class="user" style="width: 260px;height: 35px;" placeholder="请在这里输入您的账号">
						<i class="icour-user2"></i>
						<input id="input1" type="password" class="user" style="width: 260px;height: 34px;" placeholder="请在这里输入您的密码"
						 maxlength="16">
						<div id="tips"><span></span><span></span><span></span><span></span></div>
					</div>
					<div class="setting">
						<label><input type="checkbox" name="" style="float: left;">7天内自动登陆</label>
						<div class="setting-right">
							<div>找回密码</div>
						</div>
					</div>
					<div id="deng">
						<a href="#">
							<div class="submit" id="submit">登录</div>
						</a></div>
					<div id="main-zc">
						<span>还没有账号？</span>
						<a href="#">立即注册!</a>
					</div>
					<div id="main-bottom">
						<p>其他登录:</p>
						<a href="#"><img src="images-5/b.jpg" width="28" height="28"></a>
						<a href="#"><img src="images-5/bq.jpg" width="28" height="28"></a>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
